<template>
  <div>
    <a-card :title="t['皮肤管理']">
      <div class="flex">
        <a-form :model="{}">
          <a-form-item label-col-flex="100px" :label="t['搜索']">
            <div>
              <a-input-search
                @search="emit('search')"
                v-model="skinName"
                :disabled="false"
                allow-clear
              ></a-input-search>
            </div>
          </a-form-item>
          <a-form-item :label="t['选择主题']" field="groupsId" label-col-flex="100px">
            <!-- <a-input v-model="form.groupsId"></a-input> -->
            <lcd-theme-selector
              @change="emit('search')"
              class="w-[300px]"
              v-model="groupsId"
            ></lcd-theme-selector>
          </a-form-item>
          <a-form-item :label="t['数据范围']" label-col-flex="100px">
            <Scope
              type="radio"
              class="w-[300px]"
              :include="['-', '5']"
              @change="emit('search')"
              v-model="query.scope"
            />
          </a-form-item>
        </a-form>
      </div>
      <div>
        <a-button type="primary" @click="emit('create')">{{ t["新建"] }}</a-button>
        <a-button @click="emit('reload')">{{ t["刷新"] }}</a-button>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { IQuery } from "@/interface/IAxios";

const t = translate("公共模块");
const emit = defineEmits(["create", "reload", "search"]);
const skinName = defineModel<string>("skinName");
const groupsId = defineModel<string>("groupsId");

defineProps<{
  query: IQuery;
}>();
</script>

<style lang="scss" scoped></style>
